<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>市场产品溯源统计</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts.min.js"></script>
			<script src="./static/js/jquery.min.js"></script>
			<script src="./static/js/FuncTest.js"></script>
			<script src="./static/js/PortChart.js"></script>
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {
				    
				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
				}
			</style>
		</head>
		<body>
			<div id="main"></div>
			<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		-->
			<script>
				let BeginSize = [972, 165];
				let myChart = null;
				let datain = [115, 115, 115, 115, 115, 117, 115, 115, 115, 115, 115, 118, 117];
				let datain1 =[0, 0, 0, 115, 0, 0, 115, 0, 0, 0, 0, 0, 0]
				let datacat = ['11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20', '11-21', '11-22', '11-23', '11-24',
					'11-25', '11-26']
				let timeId=null;
				function fresh() {
					let current =0
					
					
					let changeData=[]
					let changeData1=[]
					datacat.forEach((item,index) => {
						let labelColor='#FFFFFF'
						let symbol='circle'
						if(item=='11-17'||item=='11-20'){
							labelColor='#FF2C2C'
						}
						changeData.push({
						value: datain[index],
						label: {
							show: true,
							position: "top",
							color: labelColor,
							fontSize: 11,
							fontWeight: "bold",
							distance: 3
							},
						})
						
						
						// changeData1.push({
						// 	value: datain1[index],
						// 	label: {
						// 		show: labelshow,
						// 		position: "top",
						// 		color: '#FF2C2C',
						// 		fontSize: 11,
						// 		fontWeight: "bold",
						// 		distance: 0
						// 	},
						// 	smooth: true,
						// 	symbolSize: 10,
						// 	symbol:'image://https://s1.ax1x.com/2022/05/27/XeHVKO.png',
							
						// })
						
					})
					
					let option = {
						backgroundColor: 'rgba(13,29,70,0.75)',
						grid: {
							left: '3%',
							right: '3%',
							bottom: '3%',
							top: '15%',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							show: false,
							axisLabel: {
								show: true,
								color: '#FFFFFF',
								fontSize: 11
							},
							splitLine: {
								show: false
							},
							axisLine: {
								show: true,
								lineStyle: {
									type: 'solid',
									color: 'rgba(112, 112, 112, 1)',
									width: 1
								}
							},
							axisTick: {
								show: false
							},
							show: true,
							data: datacat
						}],
						yAxis: [{
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: 'rgba(112, 112, 112, 0.8)',
									width: 1
								}
							},
							axisLine: { //y轴
								show: true,
								lineStyle: {
									type: 'solid',
									color: 'rgba(112, 112, 112, 1)',
									width: 1
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#FFFFFF',
								fontSize: 11,
							},
							type: 'value',
							axisTick: {
								show: false
							},
							inverse: false,
							position: 'left',
						}],
						series: [{
							name: 'xx',
							type: 'line',
							lineStyle: {
								normal: {
									color: '#38ACFF',
								},
							},
							data: changeData,
							
							smooth: true,
							symbolSize: 5,
							symbol:'circle',
							itemStyle: {
								normal:{
									color: '#38ACFF',
									borderColor: '#fff',
									borderWidth: 1,
								}
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(78, 167, 249, 0.3)'
									},
									{
										offset: 1,
										color: 'rgba(56, 172, 255, 0)'
									}
								]),
							}
						}, 
						{
							name: 'xx1',
							type: 'pictorialBar',
							lineStyle: {
								show:false
							},
							data: datain1,
							symbolRotate: 45,
							z:12,
							smooth: true,
							symbolSize: 18,
							symbol:'image://https://s1.ax1x.com/2022/05/27/XeHVKO.png',
							symbolOffset:[0, -9],
							symbolPosition: 'end',
							itemStyle: {
								normal:{
									color: 'rgba(56, 172, 255, 1)'
								}
							}
						},
						]

					};
					myChart = echarts.init(document.getElementById('main'));
					myChart.setOption(option);
					function startInterval(){
						if(timeId){
							clearInterval(timeId)
						};
						timeId=setInterval(()=>{
							if(option.series[1].symbolRotate>=360){
								option.series[1].symbolRotate=0
							}else{
								option.series[1].symbolRotate+=45;
							}
							myChart.setOption(option);
						},300)
					}
					startInterval()
				}

				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);
				changeBorder('red', false, 'topl', 10);
				//fresh();

				function LinkUE4() {
					//alert("I am an alert box!!");
					//ue4("getData2",{mes:"get all data"});
					ue4("CallBack", {}, function(v) {
						alert("I am an alert box!!");
					});
				};

				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
					let types = []
					myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}

				function changeBorder(x, y, p, n) {
					let div = document.getElementById("main");
					div.style.border = `0px solid ${x}`;
					if (y) {
						div.style.borderRadius = '10px'
					} else {
						if (p = 'topl') {
							div.style.borderTopLeftRadius = n + 'px';
						} else if (p = 'topr') {
							div.style.borderTopRightRadius = n + 'px';
						} else if (p = 'bottoml') {
							div.style.borderBottomLeftRadius = n + 'px';
						} else if (p = 'bottomr') {
							div.style.borderBottomRightRadius = n + 'px';
						}
					}
					myChart.resize();
				}

				ue.interface.ChangeSize = function(data) {
					//alert("I am an alert box!!");
					change(data[0], data[1]);


				};

				ue.interface.TransColor = function(data) {
					myColor = data;
				};

				ue.interface.TransColorFresh = function(data) {
					myColor = data;
					fresh();
				};

				ue.interface.TransData = function(data) {
					//alert(data);
					var obj = JSON.parse(data);
					dataTemp1 = obj.data1;
					dataTemp2 = obj.data2;
					fresh();
				};
				//刷新数据但不刷新动画，只是曲线变化
				ue.interface.Ani = function(data) {
					var myOption = myChart.getOption();
					myChart.setOption(myOption);
				};

				//刷新动画且更新数据
				ue.interface.ReAni = function(data) {
					var myOption = myChart.getOption();
					myChart.clear();
					myChart.setOption(myOption);
				};

				/************下面数据***********/
				ue.interface.TransData1 = function(data) {
					dataTemp1 = data;
					fresh();
				};

				ue.interface.TransData1 = function(data) {
					dataTemp2 = data;
					fresh();
				};

				ue.interface.titleData1 = function(data) {
					titleshow = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titletext = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titleleft = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titletop = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titlebottom = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titleright = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titlefsize = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titlecolor = data;
					fresh();
				};

				ue.interface.legendData1 = function(data) {
					legendshow = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendname = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendleft = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendtop = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendbottom = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendright = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendiWidth = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendiHeight = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendcolor = data;
					fresh();
				};

				ue.interface.splitLineData1 = function(data) {
					xsplitLine = data;
					fresh();
				};
				ue.interface.splitLineData1 = function(data) {
					ysplitLine = data;
					fresh();
				};

				ue.interface.axisLineData1 = function(data) {
					xaxisLineshow = data;
					fresh();
				};
				ue.interface.axisLineData1 = function(data) {
					yaxisLineshow = data;
					fresh();
				};

				ue.interface.axisLabelData1 = function(data) {
					xaxisLabelshow = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					xaxisLabelfsize = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					xaxisLabelcolor = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					yaxisLabelshow = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					yaxisLabelfsize = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					yaxisLabelcolor = data;
					fresh();
				};
				ue.interface.barWidthData1 = function(data) {
					barWidth = data;
					fresh();
				};
			</script>
		</body>
	</html>

	<body>
	</body>
</html>
